<template>
    <div class="fillcontain">
        <!-- <head-top></head-top> -->
        <div class="table_container" >
            <el-collapse v-model="activeNames" accordion>
            <el-collapse-item title="查询条件" name="1">

                <el-row :gutter="20">
                    <el-col :span="20">
                        <div class="demo-input-suffix" >
                            <el-input
                                placeholder="请输入收款台号"
                                prefix-icon="el-icon-search"
                                v-model="sktno">
                            </el-input>  
                            <el-input
                                placeholder="请输入小票号"
                                prefix-icon="el-icon-search"
                                v-model="jlbh">
                            </el-input>  
                            <el-input
                                placeholder="请输入会员卡号"
                                prefix-icon="el-icon-search"
                                v-model="hykno">
                            </el-input>                                                            
                            <el-cascader
                                clearable placeholder="请选择店铺"
                                :options="shopList"
                                v-model="selectedOptions"
                                @change="handleChange">
                            </el-cascader>        
                        </div>
                    </el-col>
                </el-row>  
                <el-row :gutter="20">
                    <el-col :span="20">
                        <div class="demo-input-suffix" >
                            <el-input
                                placeholder="请输入商品编码"
                                prefix-icon="el-icon-search"
                                v-model="spcode">
                            </el-input>  
                            <el-input
                                placeholder="请输入人员编码"
                                prefix-icon="el-icon-search"
                                v-model="rydm">
                            </el-input>  
                            <el-date-picker v-model="ksrq" type="date" placeholder="选择开始日期"
                                 format="yyyy-MM-dd"  value-format="yyyy-MM-dd">
                            </el-date-picker>  
                            <el-date-picker v-model="jsrq" type="date" placeholder="选择结束日期"
                                 format="yyyy-MM-dd"  value-format="yyyy-MM-dd">
                            </el-date-picker>                              
                        </div>
                    </el-col>
                    <el-col :span="4" >
                        <div style="text-align:right">
                        <el-button type="primary" icon="el-icon-search" :loading="searchLoading" @click="doSearch()" >查询</el-button>
                        </div>
                    </el-col>
                </el-row>                      
            </el-collapse-item>
            </el-collapse>
        </div>
        <div class="table_container" >

            <el-row :gutter="10">
                <el-col :span="20">
                    <div class="demo-input-suffix" >
                               
                    </div>
                </el-col>
                <el-col :span="4" >
                    <div style="text-align:right">
                    <el-button round type="primary" icon="el-icon-plus" size="mini" @click="doAdd()" >添加</el-button>
                    </div>
                </el-col>
            </el-row>    
            
        </div>        
        <div class="table_container">
            <el-table
                :data="tableData"
                style="width: 100%" stripe>
                <el-table-column type="expand">
                  <template scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                      <el-form-item label="收款台号">
                        <span>{{ props.row.sktno }}</span>
                      </el-form-item>
                      <el-form-item label="销售小票">
                        <span>{{ props.row.jlbh }}</span>
                      </el-form-item>                      
                      <el-form-item label="记账日期">
                        <span>{{ props.row.jzrq }}</span>
                      </el-form-item>
                      <el-form-item label="收款人编码">
                        <span>{{ props.row.rydm }}</span>
                      </el-form-item>
                      <el-form-item label="收款人名称">
                        <span>{{ props.row.rymc }}</span>
                      </el-form-item>
                      <el-form-item label="交易时间">
                         <span>{{ props.row.jysj }}</span>
                      </el-form-item>
                      <el-form-item label="销售金额">
                        <span>{{ props.row.xsje }}</span>
                      </el-form-item> 
                      <el-form-item label="会员卡号">
                        <span>{{ props.row.hykno }}</span>
                      </el-form-item>  
                      <el-form-item label="原款台">
                        <span>{{ props.row.sktno_old }}</span>
                      </el-form-item> 
                      <el-form-item label="原小票号">
                        <span>{{ props.row.jlbh_old }}</span>
                      </el-form-item>                                                                                                             
                    </el-form>
                  </template>
                </el-table-column>
                <el-table-column label="收款台号"  prop="sktno"></el-table-column>
                <el-table-column  label="销售小票" prop="jlbh"></el-table-column>
                <el-table-column label="记账日期" prop="jzrq"></el-table-column>
                <el-table-column  label="收款员编码" prop="rydm"></el-table-column>
                <el-table-column label="收款员名称" prop="rymc"></el-table-column>                
                <el-table-column label="交易时间" prop="jysj" :formatter="getJbName"></el-table-column>
                <el-table-column label="销售金额" prop="xsje" :formatter="getJbName"></el-table-column>
                <el-table-column label="会员卡号" prop="hykno" :formatter="getJbName"></el-table-column>
                <el-table-column label="操作" width="100">
                  <template slot-scope="scope">
                        <el-dropdown >
                        <span class="el-dropdown-link">
                             <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="edit" @click.native="handleEdit(scope.$index, scope.row)">查看详情</el-dropdown-item>
                        </el-dropdown-menu>
                        </el-dropdown>
                   </template>
                </el-table-column>
            </el-table>
            <div class="Pagination">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-size="20"
                  layout="total, prev, pager, next"
                  :total="count">
                </el-pagination>
            </div>
            <el-dialog title="小票详情" v-model="dialogFormVisible" :visible.sync="dialogFormVisible" width="70%">
                <el-form :model="selectTable"  ref="editForm">
                    <el-form-item label="门店名称" label-width="100px" prop="code">
                        <span>{{ selectTable.mallname }}</span>
                    </el-form-item>
                    <el-form-item label="店铺名称" label-width="100px" prop="name">
                        <span>{{ selectTable.shopinfo }}</span>
                    </el-form-item>                    
                    <el-form-item label="商品明细" label-width="100px">
                        <div class="table_container">
                            <el-table  border
                                :data="tableData_Spxx"
                                style="width: 100%" stripe>
                                <el-table-column label="商品编码"  prop="spcode"></el-table-column>
                                <el-table-column  label="商品名称" prop="spmc"></el-table-column>
                                <el-table-column label="销售金额" prop="xsje"></el-table-column>
                                <el-table-column  label="销售数量" prop="xssl"></el-table-column>
                                <el-table-column label="优惠券金额" prop="yhqje"></el-table-column>                
                                <el-table-column label="零售单价" prop="lsdj"></el-table-column>
                            </el-table> 
                        </div>
                    </el-form-item>   
                    <el-form-item label="收款方式" label-width="100px">
                        <div class="table_container">
                            <el-table  border
                                :data="tableData_Skfs"
                                style="width: 100%" stripe>
                                <el-table-column label="收款方式名称"  prop="skfsname"></el-table-column>
                                <el-table-column  label="收款金额" prop="skje"></el-table-column>
                            </el-table> 
                        </div>
                    </el-form-item>   
                    <el-form-item label="发券情况" label-width="100px">
                        <div class="table_container">
                            <el-table  border
                                :data="tableData_Fq"
                                style="width: 100%" stripe>
                                <el-table-column label="优惠券名称"  prop="coupname"></el-table-column>
                                <el-table-column  label="券号" prop="couponcode"></el-table-column>
                                <el-table-column  label="发券金额" prop="money"></el-table-column>
                            </el-table> 
                        </div>
                    </el-form-item>   
                   <el-form-item label="用券情况" label-width="100px">
                        <div class="table_container">
                            <el-table  border
                                :data="tableData_Yq"
                                style="width: 100%" stripe>
                                <el-table-column label="优惠券名称"  prop="coupname"></el-table-column>
                                <el-table-column  label="券号" prop="couponcode"></el-table-column>
                                <el-table-column  label="用券金额" prop="money"></el-table-column>
                            </el-table> 
                        </div>
                    </el-form-item>                                                                               
                </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">确定</el-button>
              </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import headTop from '../components/headTop'
    import {baseUrl, baseImgPath} from '@/config/env'
    import { getShopSaleDetailLists,getshopListsForSel,getShopSaleDetailLists_Spxx} from '@/api/getData'
    export default {
        data(){
            return {
                baseUrl,
                baseImgPath,
                searchLoading:false,
                activeNames: ['1'],                 
                curId:null,
                selectIndex: null,
                city: {},
                offset: 0,
                limit: 20,
                count: 0,
                tableData: [],
                tableData_Spxx: [],
                tableData_Skfs: [],
                tableData_Fq: [],
                tableData_Yq: [],                
                tableDataItem: [],
                currentPage: 1,
                selectTable: {},
                dialogFormVisible: false,
                categoryOptions: [],
                selectedCategory: [],
                selectedOptions:[],
                shopList:[],
                sktno:'',
                jlbh :'',
                ksrq:'',
                jsrq:'',spcode:'',rydm:''
            }
        },
        created(){
            this.initData();
        },
    	components: {
    		headTop,
    	},
        methods: {
            async initData(){
                try{
                    this.doGetShopSaleDetailLists();
                    this.getShopLists();
                }catch(err){
                    console.log('获取数据失败', err);
                }
            },
            async getShopLists(){
                var _this = this
                var data = {
                    page:1,
                    rows:999
                }
                const shops = await getshopListsForSel(data);
                this.shopList = [];
                shops.forEach(item => {
                    const tableData = {};
                    tableData.value = item.value;
                    tableData.label = item.label;
                    tableData.children = item.children;
                    this.shopList.push(tableData);
                })
                console.log('shopList:',this.shopList)
            },           
            async doGetShopSaleDetailLists(){
                var _this = this
                var data = {
                    page:_this.currentPage,
                    rows:_this.limit,
                    sktno:_this.sktno,
                    jlbh:_this.jlbh,
                    hykno:_this.hykno,
                    spcode:_this.spcode,
                    rydm:_this.rydm,
                    ksrq :_this.ksrq,
                    jsrq:_this.jsrq
                }
                const details = await getShopSaleDetailLists(data);
                this.tableData = [];
                _this.count = details.total
                details.rows.forEach(item => {
                    const tableData = {};
                    tableData.sktno = item.sktno;
                    tableData.jlbh = item.jlbh;
                    tableData.jzrq = item.jzrq.split(" ",1)[0];
                    tableData.rydm = item.rydm;
                    tableData.rymc = item.rymc;
                    tableData.jysj = item.jysj;
                    tableData.xsje = item.xsje;
                    tableData.hykno = item.hykno;
                    tableData.sktno_old = item.sktno_old;
                    tableData.jlbh_old = item.jlbh_old;
                    tableData.shopcode = item.shopcode
                    tableData.shopname = item.shopname
                    tableData.shopinfo = "("+item.shopcode+")"+item.shopname
                    tableData.mallname = item.mallname
                    this.tableData.push(tableData);
                })
            }, 
           async doGetShopSaleDetailLists_Spxx(row){
                var _this = this
                var data = {
                    sktno:row.sktno,
                    jlbh:row.jlbh
                }
                const spxx = await getShopSaleDetailLists_Spxx(data);
                this.tableData_Spxx = [];
                this.tableData_Skfs = [];
                this.tableData_Fq = [];
                this.tableData_Yq = [];                
                spxx.spxx.forEach(item => {
                    const tableData = {};
                    tableData.sktno = item.sktno;
                    tableData.jlbh = item.jlbh;
                    tableData.tckt_inx = item.tckt_inx;
                    tableData.inx = item.inx;
                    tableData.spcode = item.spcode;
                    tableData.spmc = item.spmc;
                    tableData.xsje = item.xsje;
                    tableData.xssl = item.xssl;
                    tableData.yhqje = item.yhqje;
                    tableData.lsdj = item.lsdj;
                    this.tableData_Spxx.push(tableData);
                })
                spxx.skfs.forEach(item => {
                    const tableData = {};
                    tableData.sktno = item.sktno;
                    tableData.jlbh = item.jlbh;
                    tableData.skfs = item.skfs;
                    tableData.skfsname = item.skfsname;
                    tableData.skje = item.skje;
                    this.tableData_Skfs.push(tableData);
                })   
                spxx.fq.forEach(item => {
                    const tableData = {};
                    tableData.sktno = item.sktno;
                    tableData.jlbh = item.jlbh;
                    tableData.couponcode = item.couponcode;
                    tableData.coupname = item.coupname;
                    tableData.money = item.money;
                    this.tableData_Fq.push(tableData);
                })  
                spxx.yq.forEach(item => {
                    const tableData = {};
                    tableData.sktno = item.sktno;
                    tableData.jlbh = item.jlbh;
                    tableData.couponcode = item.couponcode;
                    tableData.coupname = item.coupname;
                    tableData.money = item.money;
                    this.tableData_Yq.push(tableData);
                })                                               
            },              
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleChange(value) {
                console.log(value);
            },               
            handleCurrentChange(val) {
                this.currentPage = val;
                this.offset = (val - 1)*this.limit;
                this.doGetShopSaleDetailLists()
            },
            handleEdit(index, row) {
                console.log('handleEdit:',row)
                this.selectTable = row;
                this.doGetShopSaleDetailLists_Spxx(row)
                this.dialogFormVisible = true;
            },
            doAdd() {
               // this.selectTable ={jb:'0',sbzt:'0',sbdy:'0'}
                this.dialogFormVisible = true;
            },            
            async handleDelete(index, row) {
                var _this = this
               _this.doDeleteSpsb(row.id,index)
            },           
                    
            doSearch(){
                this.currentPage=1;
                this.searchLoading=true;
                this.doGetShopSaleDetailLists();
                this.searchLoading=false;
            },    
            handleCommand(command,row) {
                //this.$message('click on item ' + command);
                console.log('row:',row)
                this.selectTable = row;
              //  this.address.address = row.address;
                this.dialogFormVisible = true;
            },                        
        },
    }
</script>

<style lang="less">
	@import '../style/mixin';
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .table_container{
        padding: 10px 20px;
    }
    .Pagination{
        display: flex;
        justify-content: flex-start;
        margin-top: 8px;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }
    .avatar {
        width: 120px;
        height: 120px;
        display: block;
    }
    .demo-input-suffix {
        margin-bottom: 15px;
    }
    .demo-input.demo-zh-CN .el-input {
        width: 180px;
    }
    
    .demo-input-suffix .el-input {
        margin-right: 15px;
        width:auto
    }


</style>
